์๋ฐ์คํฌ๋ฆฝํธ์ ์ฐจ์ธ๋ ์งํ, ์์ค ๋จ๊ณ ์ํฌํธ๋ฅผ ํ์ํ์ธ์. ๋น๋ ํ์ ๋ชจ๋ ํด์, ๋งคํฌ๋ก, ์ ๋ก ์ฝ์คํธ ์ถ์ํ์ ๋ํ ํฌ๊ด์ ์ธ ๊ฐ์ด๋์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ ํ๋ช : ์์ค ๋จ๊ณ ์ํฌํธ(Source Phase Imports) ์ฌ์ธต ๋ถ์
์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ๋ ๋์์์ด ์งํํ๊ณ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋จ์ํ ์คํฌ๋ฆฝํ ์ธ์ด๋ก ์์ํ์ฌ, ์ง๊ธ์ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ถํฐ ์๋ฒ์ฌ์ด๋ ์ธํ๋ผ๊น์ง ๋ชจ๋ ๊ฒ์ ๊ตฌ๋ํ๋ ๊ธ๋ก๋ฒ ๊ฐ์๋ก ์ฑ์ฅํ์ต๋๋ค. ์ด๋ฌํ ์งํ์ ์ด์์ ๋ชจ๋ ์์คํ ์ธ ES ๋ชจ๋(ESM)์ ํ์คํ์์ต๋๋ค. ๊ทธ๋ฌ๋ ESM์ด ๋ณดํธ์ ์ธ ํ์ค์ด ๋์์์๋ ๋ถ๊ตฌํ๊ณ , ๊ฐ๋ฅํ ๊ฒ์ ๊ฒฝ๊ณ๋ฅผ ๋ํ๋ ์๋ก์ด ๊ณผ์ ๋ค์ด ๋ฑ์ฅํ์ต๋๋ค. ์ด๋ TC39๋ก๋ถํฐ ์์ค ๋จ๊ณ ์ํฌํธ(Source Phase Imports)๋ผ๋ ํฅ๋ฏธ๋กญ๊ณ ์ ์ฌ์ ์ผ๋ก ํ์ ์ ์ธ ์๋ก์ด ์ ์์ผ๋ก ์ด์ด์ก์ต๋๋ค.
ํ์ฌ ํ์คํ ๊ณผ์ ์ ์งํ ์ค์ธ ์ด ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์์กด์ฑ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ ๊ทผ๋ณธ์ ์ธ ๋ณํ๋ฅผ ๋ํ๋ ๋๋ค. ์ด๋ ์ธ์ด์ ์ง์ "๋น๋ ํ์" ๋๋ "์์ค ๋จ๊ณ"๋ผ๋ ๊ฐ๋ ์ ๋์ ํ์ฌ, ๊ฐ๋ฐ์๊ฐ ์ปดํ์ผ ์ค์๋ง ์คํ๋๋ ๋ชจ๋์ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ํฉ๋๋ค. ์ด ๋ชจ๋๋ค์ ์ต์ข ๋ฐํ์ ์ฝ๋์ ์ํฅ์ ์ฃผ์ง๋ง, ๊ฒฐ์ฝ ๊ทธ ์ผ๋ถ๊ฐ ๋์ง๋ ์์ต๋๋ค. ์ด๋ ํ์คํ๋๊ณ ์์ ํ ํ๋ ์์ํฌ ๋ด์์ ๋ค์ดํฐ๋ธ ๋งคํฌ๋ก, ์ ๋ก ์ฝ์คํธ ํ์ ์ถ์ํ, ๊ฐ์ํ๋ ๋น๋ ํ์ ์ฝ๋ ์์ฑ๊ณผ ๊ฐ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๋ฌธ์ ์ฝ๋๋ค.
์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์๊ฒ ์ด ์ ์์ ์ดํดํ๋ ๊ฒ์ ์๋ฐ์คํฌ๋ฆฝํธ ํด๋ง, ํ๋ ์์ํฌ, ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ์ ๋ค์ ํ์ ๋ฌผ๊ฒฐ์ ๋๋นํ๋ ํต์ฌ์ ๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋์์๋ ์์ค ๋จ๊ณ ์ํฌํธ๊ฐ ๋ฌด์์ธ์ง, ์ด๋ค ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋์ง, ์ค์ ์ฌ์ฉ ์ฌ๋ก๋ ๋ฌด์์ด๋ฉฐ, ์ ์ธ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ์ปค๋ฎค๋ํฐ ์ ์ฒด์ ๋ฏธ์น ์ฌ๋ํ ์ํฅ์ ๋ํด ํ๊ตฌํ ๊ฒ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ ๊ฐ๋ตํ ์ญ์ฌ: ESM์ผ๋ก ๊ฐ๋ ๊ธธ
์์ค ๋จ๊ณ ์ํฌํธ์ ์ค์์ฑ์ ์ ๋๋ก ์ดํดํ๋ ค๋ฉด, ๋จผ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ ์ฌ์ ์ ์ดํดํด์ผ ํฉ๋๋ค. ์ค๋ ์ญ์ฌ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ค์ดํฐ๋ธ ๋ชจ๋ ์์คํ ์ด ์์์ผ๋ฉฐ, ์ด๋ ์ฐฝ์์ ์ด์ง๋ง ํํธํ๋ ํด๊ฒฐ์ฑ ์ ์๋๋ก ์ด์ด์ก์ต๋๋ค.
์ ์ญ ๋ณ์์ ์ฆ์ ์คํ ํจ์ ํํ์(IIFE)์ ์๋
์ด๊ธฐ์ ๊ฐ๋ฐ์๋ค์ HTML ํ์ผ์ ์ฌ๋ฌ <script> ํ๊ทธ๋ฅผ ๋ก๋ํ์ฌ ์์กด์ฑ์ ๊ด๋ฆฌํ์ต๋๋ค. ์ด๋ ์ ์ญ ๋ค์์คํ์ด์ค(๋ธ๋ผ์ฐ์ ์ window ๊ฐ์ฒด)๋ฅผ ์ค์ผ์์ผ ๋ณ์ ์ถฉ๋, ์์ธก ๋ถ๊ฐ๋ฅํ ๋ก๋ฉ ์์, ์ ์ง๋ณด์์ ์
๋ชฝ์ ์ด๋ํ์ต๋๋ค. ์ด๋ฅผ ์ํํ๊ธฐ ์ํ ์ผ๋ฐ์ ์ธ ํจํด์ ์ฆ์ ์คํ ํจ์ ํํ์(IIFE)์ด์๋๋ฐ, ์ด๋ ์คํฌ๋ฆฝํธ์ ๋ณ์๋ฅผ ์ํ ๋น๊ณต๊ฐ ์ค์ฝํ๋ฅผ ์์ฑํ์ฌ ์ ์ญ ์ค์ฝํ๋ก ์ ์ถ๋๋ ๊ฒ์ ๋ฐฉ์งํ์ต๋๋ค.
์ปค๋ฎค๋ํฐ ์ฃผ๋ ํ์ค์ ๋ถ์
์ ํ๋ฆฌ์ผ์ด์ ์ด ๋์ฑ ๋ณต์กํด์ง๋ฉด์ ์ปค๋ฎค๋ํฐ๋ ๋ ๊ฒฌ๊ณ ํ ํด๊ฒฐ์ฑ ์ ๊ฐ๋ฐํ์ต๋๋ค:
- CommonJS (CJS): Node.js์ ์ํด ๋์คํ๋ CJS๋ ๋๊ธฐ์ ์ธ
require()ํจ์์exports๊ฐ์ฒด๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ ํ์ผ ์์คํ ์์ ๋ชจ๋์ ์ฝ๋ ๊ฒ์ด ๋น ๋ฅด๊ณ ๋ธ๋กํน ์์ ์ธ ์๋ฒ๋ฅผ ์ํด ์ค๊ณ๋์์ต๋๋ค. ๋๊ธฐ์ ์ธ ํน์ฑ ๋๋ฌธ์ ๋คํธ์ํฌ ์์ฒญ์ด ๋น๋๊ธฐ์ ์ธ ๋ธ๋ผ์ฐ์ ์๋ ๋ ์ ํฉํ์ต๋๋ค. - ๋น๋๊ธฐ ๋ชจ๋ ์ ์(AMD): ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ์ค๊ณ๋ AMD(๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ๊ตฌํ์ฒด์ธ RequireJS)๋ ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ์ต๋๋ค. ๋ฌธ๋ฒ์ CommonJS๋ณด๋ค ์ฅํฉํ์ง๋ง ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋คํธ์ํฌ ์ง์ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
ํ์คํ: ES ๋ชจ๋(ESM)
๋ง์นจ๋ด ECMAScript 2015(ES6)๋ ๋ค์ดํฐ๋ธํ๊ณ ํ์คํ๋ ๋ชจ๋ ์์คํ
์ธ ES ๋ชจ๋์ ๋์
ํ์ต๋๋ค. ESM์ ์ ์ ์ผ๋ก ๋ถ์ํ ์ ์๋ ๊น๋ํ๊ณ ์ ์ธ์ ์ธ ๋ฌธ๋ฒ(import์ export)์ผ๋ก ๋ ์ธ๊ณ์ ์ฅ์ ์ ๋ชจ๋ ๊ฐ์ ธ์์ต๋๋ค. ์ด๋ฌํ ์ ์ ํน์ฑ ๋๋ถ์ ๋ฒ๋ค๋ฌ์ ๊ฐ์ ๋๊ตฌ๋ ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ ์ ํธ๋ฆฌ ์์ดํน(์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ)๊ณผ ๊ฐ์ ์ต์ ํ๋ฅผ ์ํํ ์ ์์ต๋๋ค. ESM์ ๋น๋๊ธฐ์ ์ผ๋ก ์ค๊ณ๋์์ผ๋ฉฐ ํ์ฌ ๋ธ๋ผ์ฐ์ ์ Node.js ์ ๋ฐ์ ๊ฑธ์ณ ๋ณดํธ์ ์ธ ํ์ค์ด ๋์ด ํํธํ๋ ์ํ๊ณ๋ฅผ ํตํฉํ์ต๋๋ค.
์ต์ ES ๋ชจ๋์ ์จ๊ฒจ์ง ํ๊ณ
ESM์ ๋์ฑ๊ณต์ ๊ฑฐ๋์์ง๋ง, ๊ทธ ์ค๊ณ๋ ์ค๋ก์ง ๋ฐํ์ ๋์์๋ง ์ด์ ์ ๋ง์ถ๊ณ ์์ต๋๋ค. import ๋ฌธ์ ์ ํ๋ฆฌ์ผ์ด์
์ด ์คํ๋ ๋ ๊ฐ์ ธ์ค๊ณ , ํ์ฑํ๊ณ , ์คํํด์ผ ํ๋ ์์กด์ฑ์ ์๋ฏธํฉ๋๋ค. ์ด๋ฌํ ๋ฐํ์ ์ค์ฌ ๋ชจ๋ธ์ ๊ฐ๋ ฅํ์ง๋ง, ์ํ๊ณ๊ฐ ์ธ๋ถ์ ๋นํ์ค ๋๊ตฌ๋ก ํด๊ฒฐํด ์จ ๋ช ๊ฐ์ง ๊ณผ์ ๋ฅผ ๋ง๋ค์ด๋
๋๋ค.
๋ฌธ์ 1: ๋น๋ ํ์ ์์กด์ฑ์ ํ์ฐ
ํ๋์ ์น ๊ฐ๋ฐ์ ๋น๋ ๋จ๊ณ์ ํฌ๊ฒ ์์กดํฉ๋๋ค. ์ฐ๋ฆฌ๋ ํ์ ์คํฌ๋ฆฝํธ, ๋ฐ๋ฒจ, Vite, ์นํฉ, PostCSS์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์์ค ์ฝ๋๋ฅผ ํ๋ก๋์ ์ ์ต์ ํ๋ ํ์์ผ๋ก ๋ณํํฉ๋๋ค. ์ด ๊ณผ์ ์๋ ๋ฐํ์์ด ์๋ ๋น๋ ํ์์๋ง ํ์ํ ๋ง์ ์์กด์ฑ์ด ํฌํจ๋ฉ๋๋ค.
ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์๊ฐํด ๋ด
์๋ค. import { type User } from './types'๋ฅผ ์์ฑํ ๋, ๋น์ ์ ๋ฐํ์์ ์์ํ๋ ๊ฒ์ด ์๋ ์ํฐํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์์ต๋๋ค. ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ๋ ์ปดํ์ผ ์ค์ ์ด ์ํฌํธ์ ํ์
์ ๋ณด๋ฅผ ์ง์ธ ๊ฒ์
๋๋ค. ๊ทธ๋ฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์์คํ
์ ๊ด์ ์์๋ ๊ทธ์ ๋ ๋ค๋ฅธ ์ํฌํธ์ผ ๋ฟ์
๋๋ค. ๋ฒ๋ค๋ฌ์ ์์ง์ ์ด๋ฌํ "ํ์
์ ์ฉ" ์ํฌํธ๋ฅผ ์ฒ๋ฆฌํ๊ณ ํ๊ธฐํ๊ธฐ ์ํ ํน๋ณํ ๋ก์ง์ ๊ฐ์ ธ์ผ ํ๋๋ฐ, ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด ์ฌ์ ์ธ๋ถ์ ์กด์ฌํ๋ ํด๊ฒฐ์ฑ
์
๋๋ค.
๋ฌธ์ 2: ์ ๋ก ์ฝ์คํธ ์ถ์ํ(Zero-Cost Abstractions)๋ฅผ ํฅํ ํ๊ตฌ
์ ๋ก ์ฝ์คํธ ์ถ์ํ๋ ๊ฐ๋ฐ ์ค์๋ ๋์ ์์ค์ ํธ์์ฑ์ ์ ๊ณตํ์ง๋ง, ๋ฐํ์ ์ค๋ฒํค๋ ์์ด ๊ณ ํจ์จ ์ฝ๋๋ก ์ปดํ์ผ๋๋ ๊ธฐ๋ฅ์ ๋๋ค. ์๋ฒฝํ ์๋ ์ ํจ์ฑ ๊ฒ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ ์ ์์ต๋๋ค:
validate(userSchema, userData);
๋ฐํ์์ ์ด๋ ํจ์ ํธ์ถ๊ณผ ์ ํจ์ฑ ๊ฒ์ฌ ๋ก์ง์ ์คํ์ ํฌํจํฉ๋๋ค. ๋ง์ฝ ์ธ์ด๊ฐ ๋น๋ ํ์์ ์คํค๋ง๋ฅผ ๋ถ์ํ๊ณ ๋งค์ฐ ๊ตฌ์ฒด์ ์ด๊ณ ์ธ๋ผ์ธ๋ ์ ํจ์ฑ ๊ฒ์ฌ ์ฝ๋๋ฅผ ์์ฑํ์ฌ, ์ต์ข ๋ฒ๋ค์์ ์ผ๋ฐ์ ์ธ `validate` ํจ์ ํธ์ถ๊ณผ ์คํค๋ง ๊ฐ์ฒด๋ฅผ ์ ๊ฑฐํ ์ ์๋ค๋ฉด ์ด๋จ๊น์? ์ด๋ ํ์ฌ ํ์คํ๋ ๋ฐฉ์์ผ๋ก๋ ๋ถ๊ฐ๋ฅํฉ๋๋ค. ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ๋ค๋ฅด๊ฒ ์ํ๋๊ฑฐ๋ ์ฌ์ ์ปดํ์ผ๋ ์ ์์์์๋ ๋ถ๊ตฌํ๊ณ ์ ์ฒด `validate` ํจ์์ `userSchema` ๊ฐ์ฒด๋ ํด๋ผ์ด์ธํธ๋ก ์ ์ก๋์ด์ผ ํฉ๋๋ค.
๋ฌธ์ 3: ํ์คํ๋ ๋งคํฌ๋ก์ ๋ถ์ฌ
๋งคํฌ๋ก๋ Rust, Lisp, Swift์ ๊ฐ์ ์ธ์ด์์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๋๋ค. ์ด๊ฒ์ ๋ณธ์ง์ ์ผ๋ก ์ปดํ์ผ ํ์์ ์ฝ๋๋ฅผ ์์ฑํ๋ ์ฝ๋์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ์ด๋ SWC ๋ณํ๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋งคํฌ๋ก๋ฅผ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค. ๊ฐ์ฅ ๋ณดํธ์ ์ธ ์๋ JSX์ ๋๋ค:
const element = <h1>Hello, World</h1>;
์ด๊ฒ์ ์ ํจํ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋๋๋ค. ๋น๋ ๋๊ตฌ๋ ์ด๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ๋ณํํฉ๋๋ค:
const element = React.createElement('h1', null, 'Hello, World');
์ด ๋ณํ์ ๊ฐ๋ ฅํ์ง๋ง ์ ์ ์ผ๋ก ์ธ๋ถ ํด๋ง์ ์์กดํฉ๋๋ค. ์ด๋ฐ ์ข ๋ฅ์ ๊ตฌ๋ฌธ ๋ณํ์ ์ํํ๋ ํจ์๋ฅผ ์ ์ํ ์ ์๋ ๋ค์ดํฐ๋ธํ, ์ธ์ด ๋ด์ ์ธ ๋ฐฉ๋ฒ์ ์์ต๋๋ค. ์ด๋ฌํ ํ์คํ์ ๋ถ์ฌ๋ ๋ณต์กํ๊ณ ์ข ์ข ๋ถ์์ ํ ํด๋ง ์ฒด์ธ์ผ๋ก ์ด์ด์ง๋๋ค.
์์ค ๋จ๊ณ ์ํฌํธ ์๊ฐ: ํจ๋ฌ๋ค์์ ์ ํ
์์ค ๋จ๊ณ ์ํฌํธ๋ ์ด๋ฌํ ํ๊ณ์ ๋ํ ์ง์ ์ ์ธ ํด๋ต์ ๋๋ค. ์ด ์ ์์ ๋น๋ ํ์ ์์กด์ฑ๊ณผ ๋ฐํ์ ์์กด์ฑ์ ๋ช ์์ ์ผ๋ก ๋ถ๋ฆฌํ๋ ์๋ก์ด ์ํฌํธ ์ ์ธ ๊ตฌ๋ฌธ์ ๋์ ํฉ๋๋ค.
์๋ก์ด ๊ตฌ๋ฌธ์ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์
๋๋ค: import source.
import { MyType } from './types.js'; // ํ์ค ๋ฐํ์ ์ํฌํธ
import source { MyMacro } from './macros.js'; // ์๋ก์ด ์์ค ๋จ๊ณ ์ํฌํธ
ํต์ฌ ๊ฐ๋ : ๋จ๊ณ ๋ถ๋ฆฌ
ํต์ฌ ์์ด๋์ด๋ ๋ ๊ฐ์ง ๋ณ๊ฐ์ ์ฝ๋ ํ๊ฐ ๋จ๊ณ๋ฅผ ๊ณต์ํํ๋ ๊ฒ์ ๋๋ค:
- ์์ค ๋จ๊ณ (๋น๋ ํ์): ์ด ๋จ๊ณ๋ ๋จผ์ ๋ฐ์ํ๋ฉฐ, ์๋ฐ์คํฌ๋ฆฝํธ "ํธ์คํธ"(๋ฒ๋ค๋ฌ, Node.js๋ Deno์ ๊ฐ์ ๋ฐํ์, ๋๋ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ/๋น๋ ํ๊ฒฝ ๋ฑ)์ ์ํด ์ฒ๋ฆฌ๋ฉ๋๋ค. ์ด ๋จ๊ณ์์ ํธ์คํธ๋
import source์ ์ธ์ ์ฐพ์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ ํน๋ณํ๊ณ ๊ฒฉ๋ฆฌ๋ ํ๊ฒฝ์์ ์ด๋ฌํ ๋ชจ๋์ ๋ก๋ํ๊ณ ์คํํฉ๋๋ค. ์ด ๋ชจ๋๋ค์ ์์ ๋ค์ ์ํฌํธํ๋ ๋ชจ๋์ ์์ค ์ฝ๋๋ฅผ ๊ฒ์ฌํ๊ณ ๋ณํํ ์ ์์ต๋๋ค. - ๋ฐํ์ ๋จ๊ณ (์คํ ์๊ฐ): ์ด๊ฒ์ ์ฐ๋ฆฌ ๋ชจ๋์๊ฒ ์ต์ํ ๋จ๊ณ์
๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ต์ข
์ ์ผ๋ก ๋ณํ๋ ์ฝ๋๋ฅผ ์คํํฉ๋๋ค.
import source๋ฅผ ํตํด ์ํฌํธ๋ ๋ชจ๋ ๋ชจ๋๊ณผ ๊ทธ๊ฒ๋ค์ ์ฌ์ฉํ ์ฝ๋๋ ์์ ํ ์ฌ๋ผ์ง๋๋ค; ๊ทธ๋ค์ ๋ฐํ์ ๋ชจ๋ ๊ทธ๋ํ์ ์ด๋ ํ ํ์ ๋ ๋จ๊ธฐ์ง ์์ต๋๋ค.
์ด๊ฒ์ ์ธ์ด ์ฌ์์ ์ง์ ๋ด์ฅ๋, ํ์คํ๋๊ณ ์์ ํ๋ฉฐ ๋ชจ๋์ ์ธ์ํ๋ ์ ์ฒ๋ฆฌ๊ธฐ๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. C ์ ์ฒ๋ฆฌ๊ธฐ์ ๊ฐ์ ๋จ์ํ ํ ์คํธ ์นํ์ด ์๋๋ผ, ์ถ์ ๊ตฌ๋ฌธ ํธ๋ฆฌ(AST)์ ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ตฌ์กฐ์ ํจ๊ป ์๋ํ ์ ์๋ ๊น์ด ํตํฉ๋ ์์คํ ์ ๋๋ค.
์ฃผ์ ์ฌ์ฉ ์ฌ๋ก ๋ฐ ์ค์ ์์
์์ค ๋จ๊ณ ์ํฌํธ์ ์ง์ ํ ํ์ ๊ทธ๊ฒ๋ค์ด ์ฐ์ํ๊ฒ ํด๊ฒฐํ ์ ์๋ ๋ฌธ์ ๋ค์ ๋ณผ ๋ ๋ช ํํด์ง๋๋ค. ๊ฐ์ฅ ์ํฅ๋ ฅ ์๋ ๋ช ๊ฐ์ง ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ฌ์ฉ ์ฌ๋ก 1: ๋ค์ดํฐ๋ธ, ์ ๋ก ์ฝ์คํธ ํ์ ์ด๋ ธํ ์ด์
์ด ์ ์์ ์ฃผ์ ๋์ธ ์ค ํ๋๋ ํ์ ์คํฌ๋ฆฝํธ๋ Flow์ ๊ฐ์ ํ์ ์์คํ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด ์์ฒด ๋ด์์ ๋ค์ดํฐ๋ธํ๊ฒ ์์ฉํ ๊ณต๊ฐ์ ์ ๊ณตํ๋ ๊ฒ์ ๋๋ค. ํ์ฌ `import type { ... }`๋ ํ์ ์คํฌ๋ฆฝํธ ๊ณ ์ ์ ๊ธฐ๋ฅ์ ๋๋ค. ์์ค ๋จ๊ณ ์ํฌํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๊ฒ์ด ํ์ค ์ธ์ด ๊ตฌ์ฑ ์์๊ฐ ๋ฉ๋๋ค.
ํ์ฌ (ํ์ ์คํฌ๋ฆฝํธ):
// types.ts
export interface User {
id: number;
name: string;
}
// app.ts
import type { User } from './types';
const user: User = { id: 1, name: 'Alice' };
๋ฏธ๋ (ํ์ค ์๋ฐ์คํฌ๋ฆฝํธ):
// types.js
export interface User { /* ... */ } // ํ์
๊ตฌ๋ฌธ ์ ์๋ ์ฑํ๋๋ค๊ณ ๊ฐ์
// app.js
import source { User } from './types.js';
const user: User = { id: 1, name: 'Alice' };
์ฅ์ : import source ๋ฌธ์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋๊ตฌ๋ ์์ง์๊ฒ ./types.js๊ฐ ๋น๋ ํ์ ์ ์ฉ ์์กด์ฑ์์ ๋ช
ํํ๊ฒ ์๋ ค์ค๋๋ค. ๋ฐํ์ ์์ง์ ๊ฒฐ์ฝ ๊ทธ๊ฒ์ ๊ฐ์ ธ์ค๊ฑฐ๋ ํ์ฑํ๋ ค๊ณ ์๋ํ์ง ์์ ๊ฒ์
๋๋ค. ์ด๋ ํ์
์ ๊ฑฐ ๊ฐ๋
์ ํ์คํํ์ฌ ์ธ์ด์ ๊ณต์์ ์ธ ์ผ๋ถ๋ก ๋ง๋ค๊ณ ๋ฒ๋ค๋ฌ, ๋ฆฐํฐ ๋ฐ ๊ธฐํ ๋๊ตฌ์ ์์
์ ๋จ์ํํฉ๋๋ค.
์ฌ์ฉ ์ฌ๋ก 2: ๊ฐ๋ ฅํ๊ณ ์์์ ์ธ ๋งคํฌ๋ก
๋งคํฌ๋ก๋ ์์ค ๋จ๊ณ ์ํฌํธ์ ๊ฐ์ฅ ํ์ ์ ์ธ ์์ฉ ํ๋ก๊ทธ๋จ์ ๋๋ค. ๊ฐ๋ฐ์๋ ์ด๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ตฌ๋ฌธ์ ํ์ฅํ๊ณ ์์ ํ๊ณ ํ์คํ๋ ๋ฐฉ์์ผ๋ก ๊ฐ๋ ฅํ ๋๋ฉ์ธ ํนํ ์ธ์ด(DSL)๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
๋น๋ ํ์์ ํ์ผ๊ณผ ์ค ๋ฒํธ๋ฅผ ์๋์ผ๋ก ํฌํจํ๋ ๊ฐ๋จํ ๋ก๊น ๋งคํฌ๋ก๋ฅผ ์์ํด ๋ด ์๋ค.
๋งคํฌ๋ก ์ ์:
// macros.js
export function log(macroContext) {
// 'macroContext'๋ ํธ์ถ ์ฌ์ดํธ๋ฅผ ๊ฒ์ฌํ ์ ์๋ API๋ฅผ ์ ๊ณตํ ๊ฒ์
๋๋ค.
const callSite = macroContext.getCallSiteInfo(); // ์: { file: 'app.js', line: 5 }
const messageArgument = macroContext.getArgument(0); // ๋ฉ์์ง์ ๋ํ AST๋ฅผ ๊ฐ์ ธ์ต๋๋ค.
// console.log ํธ์ถ์ ์ํ ์๋ก์ด AST๋ฅผ ๋ฐํํฉ๋๋ค.
return `console.log("[${callSite.file}:${callSite.line}]", ${messageArgument})`;
}
๋งคํฌ๋ก ์ฌ์ฉ:
// app.js
import source { log } from './macros.js';
const value = 42;
log(`The value is: ${value}`);
์ปดํ์ผ๋ ๋ฐํ์ ์ฝ๋:
// app.js (์์ค ๋จ๊ณ ์ดํ)
const value = 42;
console.log("[app.js:5]", `The value is: ${value}`);
์ฅ์ : ์ฐ๋ฆฌ๋ ๋น๋ ํ์ ์ ๋ณด๋ฅผ ๋ฐํ์ ์ฝ๋์ ์ง์ ์ฃผ์ ํ๋ ๋ ํํ๋ ฅ ์๋ `log` ํจ์๋ฅผ ๋ง๋ค์์ต๋๋ค. ๋ฐํ์์๋ `log` ํจ์ ํธ์ถ์ด ์๊ณ , ์ง์ ์ ์ธ `console.log`๋ง ์์ต๋๋ค. ์ด๊ฒ์ด ์ง์ ํ ์ ๋ก ์ฝ์คํธ ์ถ์ํ์ ๋๋ค. ์ด์ ๋์ผํ ์๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ JSX, styled-components, ๊ตญ์ ํ(i18n) ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ์ ์ปค์คํ ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ ์์ด ๊ตฌํํ ์ ์์ต๋๋ค.
์ฌ์ฉ ์ฌ๋ก 3: ํตํฉ๋ ๋น๋ ํ์ ์ฝ๋ ์์ฑ
๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์ GraphQL ์คํค๋ง, ํ๋กํ ์ฝ ๋ฒํผ ์ ์ ๋๋ YAML์ด๋ JSON๊ณผ ๊ฐ์ ๊ฐ๋จํ ๋ฐ์ดํฐ ํ์ผ๊ณผ ๊ฐ์ ๋ค๋ฅธ ์์ค์์ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ์์กดํฉ๋๋ค.
GraphQL ์คํค๋ง๊ฐ ์๊ณ ์ด๋ฅผ ์ํ ์ต์ ํ๋ ํด๋ผ์ด์ธํธ๋ฅผ ์์ฑํ๊ณ ์ถ๋ค๊ณ ์์ํด ๋ณด์ธ์. ์ค๋๋ ์ด๊ฒ์ ์ธ๋ถ CLI ๋๊ตฌ์ ๋ณต์กํ ๋น๋ ์ค์ ์ด ํ์ํฉ๋๋ค. ์์ค ๋จ๊ณ ์ํฌํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๊ฒ์ด ๋ชจ๋ ๊ทธ๋ํ์ ํตํฉ๋ ์ผ๋ถ๊ฐ ๋ ์ ์์ต๋๋ค.
์์ฑ๊ธฐ ๋ชจ๋:
// graphql-codegen.js
export function createClient(schemaText) {
// 1. schemaText ํ์ฑ
// 2. ํ์
์ด ์ง์ ๋ ํด๋ผ์ด์ธํธ๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์์ฑ
// 3. ์์ฑ๋ ์ฝ๋๋ฅผ ๋ฌธ์์ด๋ก ๋ฐํ
const generatedCode = `
export const client = {
query: { /* ... ์์ฑ๋ ๋ฉ์๋๋ค ... */ }
};
`;
return generatedCode;
}
์์ฑ๊ธฐ ์ฌ์ฉ:
// app.js
// 1. ์ํฌํธ ๋จ์ธ(๋ณ๋ ๊ธฐ๋ฅ)์ ์ฌ์ฉํ์ฌ ์คํค๋ง๋ฅผ ํ
์คํธ๋ก ์ํฌํธ
import schema from './api.graphql' with { type: 'text' };
// 2. ์์ค ๋จ๊ณ ์ํฌํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ ์์ฑ๊ธฐ ์ํฌํธ
import source { createClient } from './graphql-codegen.js';
// 3. ๋น๋ ํ์์ ์์ฑ๊ธฐ๋ฅผ ์คํํ๊ณ ๊ทธ ์ถ๋ ฅ์ ์ฃผ์
export const { client } = createClient(schema);
์ฅ์ : ์ ์ฒด ํ๋ก์ธ์ค๋ ์ ์ธ์ ์ด๋ฉฐ ์์ค ์ฝ๋์ ์ผ๋ถ์ ๋๋ค. ์ธ๋ถ ์ฝ๋ ์์ฑ๊ธฐ๋ฅผ ์คํํ๋ ๊ฒ์ ๋ ์ด์ ๋ณ๋์ ์๋ ๋จ๊ณ๊ฐ ์๋๋๋ค. `api.graphql`์ด ๋ณ๊ฒฝ๋๋ฉด ๋น๋ ๋๊ตฌ๋ `app.js`์ ๋ํ ์์ค ๋จ๊ณ๋ฅผ ๋ค์ ์คํํด์ผ ํ๋ค๋ ๊ฒ์ ์๋์ผ๋ก ์๊ฒ ๋ฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ๋ ๊ฐ๋จํ๊ณ , ๋ ๊ฒฌ๊ณ ํ๋ฉฐ, ์ค๋ฅ ๋ฐ์ ๊ฐ๋ฅ์ฑ์ด ์ ๊ฒ ๋ง๋ญ๋๋ค.
์๋ ๋ฐฉ์: ํธ์คํธ, ์๋๋ฐ์ค, ๊ทธ๋ฆฌ๊ณ ๋จ๊ณ๋ค
์๋ฐ์คํฌ๋ฆฝํธ ์์ง ์์ฒด(Chrome๊ณผ Node.js์ V8 ๋ฑ)๊ฐ ์์ค ๋จ๊ณ๋ฅผ ์คํํ์ง ์๋๋ค๋ ์ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ฑ ์์ ํธ์คํธ ํ๊ฒฝ์ ์์ต๋๋ค.
ํธ์คํธ์ ์ญํ
ํธ์คํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ปดํ์ผํ๊ฑฐ๋ ์คํํ๋ ํ๋ก๊ทธ๋จ์ ๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ์ ์์ต๋๋ค:
- Vite, Webpack, ๋๋ Parcel๊ณผ ๊ฐ์ ๋ฒ๋ค๋ฌ.
- Node.js ๋๋ Deno์ ๊ฐ์ ๋ฐํ์.
- ์ฌ์ง์ด ๋ธ๋ผ์ฐ์ ๋ DevTools์์ ์คํ๋๋ ์ฝ๋๋ ๊ฐ๋ฐ ์๋ฒ ๋น๋ ๊ณผ์ ์ค์ ํธ์คํธ ์ญํ ์ ํ ์ ์์ต๋๋ค.
ํธ์คํธ๋ ๋ ๋จ๊ณ์ ํ๋ก์ธ์ค๋ฅผ ์กฐ์จํฉ๋๋ค:
- ์ฝ๋๋ฅผ ํ์ฑํ๊ณ ๋ชจ๋
import source์ ์ธ์ ๋ฐ๊ฒฌํฉ๋๋ค. - ์์ค ๋จ๊ณ ๋ชจ๋์ ์คํํ๊ธฐ ์ํด ํน๋ณํ ๊ฒฉ๋ฆฌ๋, ์๋๋ฐ์ค ํ๊ฒฝ(์ข ์ข "Realm"์ด๋ผ๊ณ ๋ถ๋ฆผ)์ ์์ฑํฉ๋๋ค.
- ์ด ์๋๋ฐ์ค ๋ด์์ ์ํฌํธ๋ ์์ค ๋ชจ๋์ ์ฝ๋๋ฅผ ์คํํฉ๋๋ค. ์ด ๋ชจ๋๋ค์๋ ์์ ๋ค์ด ๋ณํํ๋ ์ฝ๋์ ์ํธ ์์ฉํ ์ ์๋ ํน๋ณํ API(์: AST ์กฐ์ API)๊ฐ ์ฃผ์ด์ง๋๋ค.
- ๋ณํ์ด ์ ์ฉ๋์ด ์ต์ข ๋ฐํ์ ์ฝ๋๊ฐ ์์ฑ๋ฉ๋๋ค.
- ์ด ์ต์ข ์ฝ๋๋ ๋ฐํ์ ๋จ๊ณ๋ฅผ ์ํด ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ์ ๋ฌ๋ฉ๋๋ค.
๋ณด์๊ณผ ์๋๋ฐ์ฑ์ ์ค์์ฑ
๋น๋ ํ์์ ์ฝ๋๋ฅผ ์คํํ๋ ๊ฒ์ ์ ์ฌ์ ์ธ ๋ณด์ ์ํ์ ์ด๋ํฉ๋๋ค. ์ ์์ ์ธ ๋น๋ ํ์ ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ฐ์์ ์ปดํจํฐ์์ ํ์ผ ์์คํ ์ด๋ ๋คํธ์ํฌ์ ์ ๊ทผํ๋ ค๊ณ ์๋ํ ์ ์์ต๋๋ค. ์์ค ๋จ๊ณ ์ํฌํธ ์ ์์ ๋ณด์์ ๊ฐํ ์ค์ ์ ๋ก๋๋ค.
์์ค ๋จ๊ณ ์ฝ๋๋ ๋งค์ฐ ์ ํ๋ ์๋๋ฐ์ค์์ ์คํ๋ฉ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ค์ ํญ๋ชฉ์ ์ ๊ทผํ ์ ์์ต๋๋ค:
- ๋ก์ปฌ ํ์ผ ์์คํ .
- ๋คํธ์ํฌ ์์ฒญ.
window๋๋process์ ๊ฐ์ ๋ฐํ์ ์ ์ญ ๋ณ์.
ํ์ผ ์ ๊ทผ๊ณผ ๊ฐ์ ๋ชจ๋ ๊ธฐ๋ฅ์ ํธ์คํธ ํ๊ฒฝ์ ์ํด ๋ช ์์ ์ผ๋ก ๋ถ์ฌ๋์ด์ผ ํ๋ฉฐ, ์ด๋ ์ฌ์ฉ์์๊ฒ ๋น๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ ์ ์๋ ์ผ์ ๋ํ ์์ ํ ์ ์ด๊ถ์ ์ค๋๋ค. ์ด๋ ์ข ์ข ์์คํ ์ ๋ํ ์ ์ฒด ์ ๊ทผ ๊ถํ์ ๊ฐ๋ ํ์ฌ์ ํ๋ฌ๊ทธ์ธ ๋ฐ ์คํฌ๋ฆฝํธ ์ํ๊ณ๋ณด๋ค ํจ์ฌ ์์ ํ๊ฒ ๋ง๋ญ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ์ ๋ฏธ์น๋ ์ ์ธ๊ณ์ ์ํฅ
์์ค ๋จ๊ณ ์ํฌํธ์ ๋์ ์ ์ ์ธ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ ์ ๋ฐ์ ํ๊ธ ํจ๊ณผ๋ฅผ ์ผ์ผ์ผ ์ฐ๋ฆฌ๊ฐ ๋๊ตฌ, ํ๋ ์์ํฌ, ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ ๊ทผ๋ณธ์ ์ผ๋ก ๋ณํ์ํฌ ๊ฒ์ ๋๋ค.
ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์์๋ฅผ ์ํด
React, Svelte, Vue, Solid์ ๊ฐ์ ํ๋ ์์ํฌ๋ ์์ค ๋จ๊ณ ์ํฌํธ๋ฅผ ํ์ฉํ์ฌ ์ปดํ์ผ๋ฌ๋ฅผ ์ธ์ด ์์ฒด์ ์ผ๋ถ๋ก ๋ง๋ค ์ ์์ต๋๋ค. Svelte ์ปดํฌ๋ํธ๋ฅผ ์ต์ ํ๋ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํํ๋ Svelte ์ปดํ์ผ๋ฌ๋ ๋งคํฌ๋ก๋ก ๊ตฌํ๋ ์ ์์ต๋๋ค. JSX๋ ํ์ค ๋งคํฌ๋ก๊ฐ ๋์ด ๋ชจ๋ ๋๊ตฌ๊ฐ ์์ฒด์ ์ผ๋ก ๋ณํ์ ๊ตฌํํ ํ์๊ฐ ์์ด์ง ์ ์์ต๋๋ค.
CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ชจ๋ ์คํ์ผ ํ์ฑ๊ณผ ์ ์ ๊ท์น ์์ฑ์ ๋น๋ ํ์์ ์ํํ์ฌ ์ต์ํ์ ๋ฐํ์ ๋๋ ์ฌ์ง์ด ์ ๋ก ๋ฐํ์์ ์ ๊ณตํจ์ผ๋ก์จ ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ด๋์ด๋ผ ์ ์์ต๋๋ค.
ํด๋ง ๊ฐ๋ฐ์๋ฅผ ์ํด
Vite, Webpack, esbuild ๋ฑ์ ์ ์์๋ค์๊ฒ ์ด ์ ์์ ๊ฐ๋ ฅํ๊ณ ํ์คํ๋ ํ์ฅ ์ง์ ์ ์ ๊ณตํฉ๋๋ค. ๋๊ตฌ๋ง๋ค ๋ค๋ฅธ ๋ณต์กํ ํ๋ฌ๊ทธ์ธ API์ ์์กดํ๋ ๋์ , ๊ทธ๋ค์ ์ธ์ด ์์ฒด์ ๋น๋ ํ์ ๋จ๊ณ์ ์ง์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค. ์ด๋ ํ ๋๊ตฌ๋ฅผ ์ํด ์์ฑ๋ ๋งคํฌ๋ก๊ฐ ๋ค๋ฅธ ๋๊ตฌ์์๋ ์ํํ๊ฒ ์๋ํ๋, ๋ ํตํฉ๋๊ณ ์ํธ ์ด์ฉ ๊ฐ๋ฅํ ํด๋ง ์ํ๊ณ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๋ฅผ ์ํด
๋งค์ผ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๋ ์๋ฐฑ๋ง ๋ช ์ ๊ฐ๋ฐ์๋ค์๊ฒ ์ด์ ์ ๋ง์ต๋๋ค:
- ๋ ๊ฐ๋จํ ๋น๋ ๊ตฌ์ฑ: ํ์ ์คํฌ๋ฆฝํธ, JSX, ๋๋ ์ฝ๋ ์์ฑ๊ณผ ๊ฐ์ ์ผ๋ฐ์ ์ธ ์์ ์ ์ํ ๋ณต์กํ ํ๋ฌ๊ทธ์ธ ์ฒด์ธ์ ๋ํ ์์กด๋ ๊ฐ์.
- ์ฑ๋ฅ ํฅ์: ์ง์ ํ ์ ๋ก ์ฝ์คํธ ์ถ์ํ๋ ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ์ ๋ ๋น ๋ฅธ ๋ฐํ์ ์คํ์ผ๋ก ์ด์ด์ง ๊ฒ์ ๋๋ค.
- ํฅ์๋ ๊ฐ๋ฐ์ ๊ฒฝํ: ์ธ์ด์ ๋ํ ์ฌ์ฉ์ ์ ์, ๋๋ฉ์ธ ํนํ ํ์ฅ์ ์์ฑํ๋ ๋ฅ๋ ฅ์ ์๋ก์ด ์์ค์ ํํ๋ ฅ์ ๋ฐํํ๊ณ ์์ฉ๊ตฌ๋ฅผ ์ค์ผ ๊ฒ์ ๋๋ค.
ํ์ฌ ์ํ์ ์์ผ๋ก์ ๊ธธ
์์ค ๋จ๊ณ ์ํฌํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์คํํ๋ ์์ํ์ธ TC39์์ ๊ฐ๋ฐ ์ค์ธ ์ ์์ ๋๋ค. TC39 ํ๋ก์ธ์ค๋ 1๋จ๊ณ(์ ์)๋ถํฐ 4๋จ๊ณ(์๋ฃ๋์ด ์ธ์ด์ ํฌํจ๋ ์ค๋น๊ฐ ๋จ)๊น์ง ๋ค ๊ฐ์ง ์ฃผ์ ๋จ๊ณ๊ฐ ์์ต๋๋ค.
2023๋ ํ๋ฐ ๊ธฐ์ค์ผ๋ก, "์์ค ๋จ๊ณ ์ํฌํธ" ์ ์(๊ทธ๋ฆฌ๊ณ ๊ทธ์ ์์ํ๋ ๋งคํฌ๋ก)์ 2๋จ๊ณ(Stage 2)์ ์์ต๋๋ค. ์ด๋ ์์ํ๊ฐ ์ด์์ ์๋ฝํ์ผ๋ฉฐ ์ธ๋ถ ์ฌ์์ ์ ๊ทน์ ์ผ๋ก ์์ ํ๊ณ ์์์ ์๋ฏธํฉ๋๋ค. ํต์ฌ ๊ตฌ๋ฌธ๊ณผ ์๋ฏธ๋ ๋์ฒด๋ก ์ ํด์ก์ผ๋ฉฐ, ์ด ๋จ๊ณ์์ ํผ๋๋ฐฑ์ ์ ๊ณตํ๊ธฐ ์ํ ์ด๊ธฐ ๊ตฌํ๊ณผ ์คํ์ด ๊ถ์ฅ๋ฉ๋๋ค.
์ด๋ ์ค๋๋ ๋ธ๋ผ์ฐ์ ๋ Node.js ํ๋ก์ ํธ์์ import source๋ฅผ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ ์์ด 3๋จ๊ณ๋ก ์ฑ์ํจ์ ๋ฐ๋ผ ๊ฐ๊น์ด ๋ฏธ๋์ ์ต์ฒจ๋จ ๋น๋ ๋๊ตฌ์ ํธ๋์คํ์ผ๋ฌ์์ ์คํ์ ์ธ ์ง์์ด ๋ํ๋ ๊ฒ์ผ๋ก ๊ธฐ๋ํ ์ ์์ต๋๋ค. ์ ๋ณด๋ฅผ ์ป๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ GitHub์์ ๊ณต์ TC39 ์ ์์ ํ๋ก์ฐํ๋ ๊ฒ์
๋๋ค.
๊ฒฐ๋ก : ๋ฏธ๋๋ ๋น๋ ํ์์ ์๋ค
์์ค ๋จ๊ณ ์ํฌํธ๋ ES ๋ชจ๋ ๋์ ์ดํ ์๋ฐ์คํฌ๋ฆฝํธ ์ญ์ฌ์ ๊ฐ์ฅ ์ค์ํ ์ํคํ ์ฒ ๋ณํ ์ค ํ๋๋ฅผ ๋ํ๋ ๋๋ค. ๋น๋ ํ์๊ณผ ๋ฐํ์ ์ฌ์ด์ ๊ณต์์ ์ด๊ณ ํ์คํ๋ ๋ถ๋ฆฌ๋ฅผ ์์ฑํจ์ผ๋ก์จ, ์ด ์ ์์ ์ธ์ด์ ๊ทผ๋ณธ์ ์ธ ๊ฒฉ์ฐจ๋ฅผ ํด์ํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๋ค์ด ์ค๋ซ๋์ ์ํ๋ ๊ธฐ๋ฅ๋คโ๋งคํฌ๋ก, ์ปดํ์ผ ํ์ ๋ฉํํ๋ก๊ทธ๋๋ฐ, ์ง์ ํ ์ ๋ก ์ฝ์คํธ ์ถ์ํโ์ ์ฌ์ฉ์ ์ ์๋๊ณ ํํธํ๋ ํด๋ง์ ์์ญ์์ ๋ฒ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ฒด์ ํต์ฌ์ผ๋ก ๊ฐ์ ธ์ต๋๋ค.
์ด๊ฒ์ ๋จ์ํ ์๋ก์ด ๊ตฌ๋ฌธ ์กฐ๊ฐ ์ด์์ ๋๋ค; ์ด๊ฒ์ ์ฐ๋ฆฌ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ํํธ์จ์ด๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ์์ ๋ํ ์๋ก์ด ์ฌ๊ณ ๋ฐฉ์์ ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๋ค์ด ๋ ๋ง์ ๋ก์ง์ ์ฌ์ฉ์์ ์ฅ์น์์ ๊ฐ๋ฐ์์ ๊ธฐ๊ณ๋ก ์ฎ๊ธธ ์ ์๋๋ก ํ์ฌ, ๋ ๊ฐ๋ ฅํ๊ณ ํํ๋ ฅ์ด ํ๋ถํ ๋ฟ๋ง ์๋๋ผ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ฒ ํฉ๋๋ค. ์ ์์ด ํ์คํ๋ฅผ ํฅํ ์ฌ์ ์ ๊ณ์ํจ์ ๋ฐ๋ผ, ์ ์ธ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ์ปค๋ฎค๋ํฐ๋ ๊ธฐ๋๋ฅผ ๊ฐ์ง๊ณ ์ง์ผ๋ด์ผ ํฉ๋๋ค. ๋น๋ ํ์ ํ์ ์ ์๋ก์ด ์๋๊ฐ ๋ฐ๋ก ๋์์ ์์ต๋๋ค.